<template>
  <a-layout class="layout">
    <a-layout-header :style="{ background: '#139bd5', padding: '0 50px' }">
      <div class="logo"></div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="light"
        mode="horizontal"
        :style="{ lineHeight: '64px', background: '#139bd5', color: '#ffffff' }"
      >
        <a-menu-item key="1" @click="changeIsIndex">首页</a-menu-item>
        <a-sub-menu key="2" title="系统设置" :style="{ lineHeight: '64px', background: '#139bd5', color: '#ffffff' }">
          <a-menu-item key="2-1" @click="goTo('/siteSet')" >站点设置</a-menu-item>
          <a-menu-item key="2-2" @click="goTo('/faculty')">院系管理</a-menu-item>
        </a-sub-menu>
    
        <a-menu-item key="3">
          <router-link to="/index/taskManage">任务管理</router-link></a-menu-item>
        <a-menu-item key="4"
        ><router-link to="/index/schoolAct">学校动态</router-link></a-menu-item>
        <!-- 用户头像，下拉菜单 -->
        <a-menu-item key="5" style="float: right; margin-left: auto;">
          <a-dropdown style="width: 300px;">
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a-avatar>
                    <template #icon>
                      <UserOutlined />
                    </template>
                  </a-avatar>
                  {{ username }}
                </a-menu-item>
                <a-menu-item key="profile">
                  <UserOutlined />
                  个人中心
                </a-menu-item>
                <a-menu-item key="logout" @click="exitLogin">
                  <LogoutOutlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
            <!-- 头像和用户名显示 -->
            <span style="color: #ffffff; margin-left: 8px;">
              <a-avatar>
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
          
            </span>
          </a-dropdown>
        </a-menu-item>
      </a-menu>
    </a-layout-header>

    <a-layout-content style="padding: 0 50px">
      <img src="../components/images/foot.png" v-show="isImgVisible" style="width: 100%;height:100%">
      
         <router-view  v-show="!isImgVisible"></router-view>
         

    
    </a-layout-content>
   

    <a-layout-footer style="text-align: center">
      ©2024河北师范大学教育实习管理支持平台
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { UserOutlined, LogoutOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
//默认固定首页
const selectedKeys = ref(['1']);
const username = ref('');
//路由，跳转系统设置用
const router = useRouter();
// 跳转到指定路由，隐藏图片
const isImgVisible = ref(true);
//点击首页，返回index
const changeIsIndex=()=>{
  isImgVisible.value=true;
  router.push({name:"index"})
} 
//跳转
const goTo = (route) => {
 
  router.push(route);
};
// 监听路由变化，根据路由名称或路径决定是否显示 img
router.beforeEach((to, from, next) => {
  if (to.name === 'taskManage' || to.name === 'schoolAct') {
    isImgVisible.value = false;
  } else {
    isImgVisible.value = true;
  }
  next();
});



// 从本地存储获取用户名
onMounted(() => {
  username.value = localStorage.getItem('username') ; 
});
//退出登录

const exitLogin=()=>{
  const storage=window.localStorage;
  storage.clear();
  router.push({name:'login'})

}

</script>

<style scoped>
.layout {
  width: 100vw;
  height: 100vh;
}

.logo {
  width: 120px;
  height: 64px;
  background-image: url('@/components/images/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  margin: 16px 24px 0 0;
}

.ant-menu-item {
  color: #ffffff;
}

</style>




